import { Avatar, Header, Tab, TabView } from '@rneui/themed';
import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Chats from './Chats/Chats';
import Self from './Self/Self';

export default function Home() {
    const [tabIndex, setTabIndex] = useState(0);

    return (
        <>
            <Header
                leftComponent={
                    <View style={styles.globalAvatarContainerStyle}>
                        <Avatar
                            size={32}
                            rounded
                            source={{ uri: 'https://assets.aiolia.top/Pictures/Others/116359b4ccf19917.jpg' }}
                        />
                        <View style={{ left: 5, width: '200%' }}>
                            <Text style={styles.globalTitleStyle}>樊晨煜</Text>
                        </View>
                    </View>
                }
            // centerComponent={{ text: '山大会议', style: styles.globalTitleStyle }}
            />
            <TabView value={tabIndex} onChange={setTabIndex} animationType='timing' animationConfig={{
                duration: 250,
            }}>
                <TabView.Item style={styles.tabViewStyle}>
                    <Chats />
                </TabView.Item>
                <TabView.Item style={styles.tabViewStyle}>
                    <Text h1>会议</Text>
                </TabView.Item>
                <TabView.Item style={styles.tabViewStyle}>
                    <Self />
                </TabView.Item>
            </TabView>

            <Tab
                value={tabIndex}
                onChange={setTabIndex}
                indicatorStyle={{
                    backgroundColor: '#2089dc',
                    height: 3,
                }}
                variant='primary'>
                <Tab.Item
                    title={'聊天'}
                    titleStyle={getTabTitleStyle}
                    icon={{ name: 'chatbubbles', type: 'ionicon', color: tabIndex === 0 ? '#2089dc' : '#808080' }}
                    buttonStyle={{ backgroundColor: 'white' }}
                />
                <Tab.Item
                    title="会议"
                    titleStyle={getTabTitleStyle}
                    icon={{ name: 'logo-youtube', type: 'ionicon', color: tabIndex === 1 ? '#2089dc' : '#808080' }}
                    buttonStyle={{ backgroundColor: 'white' }}
                />
                <Tab.Item
                    title="我的"
                    titleStyle={getTabTitleStyle}
                    icon={{ name: 'person', type: 'ionicon', color: tabIndex === 2 ? '#2089dc' : '#808080' }}
                    buttonStyle={{ backgroundColor: 'white' }}
                />
            </Tab>
        </>
    );
}

function getTabTitleStyle(active) {
    return {
        fontSize: 12,
        color: active ? '#2089dc' : '#808080'
    }
}

const styles = StyleSheet.create({
    globalAvatarContainerStyle: {
        display: 'flex',
        flexDirection: 'row',
        width: '100%'
    },
    globalTitleStyle: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold'
    },
    tabViewStyle: { width: '100%', backgroundColor: '#f0f0f0' }
})
